<script setup>
import { computed } from "vue";
import { useRouter, useRoute } from "vue-router";
// 导入Element Plus图标
import {
  HomeFilled,
  UserFilled,
  TrendCharts,
  CollectionTag,
  Box,
  Setting
} from '@element-plus/icons-vue';

const props = defineProps({
  collapsed: {
    type: Boolean,
    default: false,
  },
});

const router = useRouter();
const route = useRoute();

// 菜单项数据
const menuItems = [
  {
    index: "home",
    name: "首页",
    icon: HomeFilled,
    path: "/home",
    children: [],
  },
  {
    index: "clue",
    name: "线索管理",
    icon: UserFilled,
    children: [
      { index: "clue-1", name: "线索列表", path: "/clue" },
      { index: "clue-2", name: "线索池", path: "/cluepool" },
    ],
  },
  {
    index: "business",
    name: "商机管理",
    icon: TrendCharts,
    children: [
      { index: "business-1", name: "商机列表", path: "/business" },
      { index: "business-2", name: "公海池", path: "/publicpool" },
    ],
  },
  {
    index: "customer",
    name: "客户管理",
    icon: CollectionTag,
    path: "/customer",
    children: [],
  },
  {
    index: "resource",
    name: "资源管理",
    icon: Box,
    children: [
      { index: "resource-1", name: "课程管理", path: "/course" },
      { index: "resource-2", name: "活动管理", path: "/activity" },
    ],
  },
  {
    index: "system",
    name: "系统管理",
    icon: Setting,
    children: [
      { index: "system-1", name: "部门管理", path: "/department" },
      { index: "system-2", name: "角色管理", path: "/role" },
      { index: "system-3", name: "用户管理", path: "/user" },
      { index: "system-4", name: "系统日志", path: "/log" },
    ],
  },
];

// 计算当前激活的菜单项
const activeMenu = computed(() => {
  const currentPath = route.path;

  // 查找匹配的子菜单项
  for (const item of menuItems) {
    if (item.children && item.children.length > 0) {
      const matchedChild = item.children.find(
        (child) => child.path === currentPath
      );
      if (matchedChild) {
        return matchedChild.index;
      }
    } else if (item.path === currentPath) {
      return item.index;
    }
  }

  return "home";
});

// 处理菜单项点击事件
const handleMenuItemClick = (item) => {
  if (item.path) {
    router.push(item.path);
  }
};

// 处理菜单展开事件
const handleOpen = (key, keyPath) => {
};

// 处理菜单收起事件
const handleClose = (key, keyPath) => {
};
</script>

<template>
  <aside class="sidebar" :class="{ 'sidebar-collapsed': collapsed }">
    <el-menu
      :default-active="activeMenu"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @open="handleOpen"
      @close="handleClose"
    >
      <template v-for="item in menuItems" :key="item.index">
        <el-sub-menu
          v-if="item.children && item.children.length > 0"
          :index="item.index"
        >
          <template #title>
            <el-icon><component :is="item.icon"></component></el-icon>
            <span v-show="!collapsed">{{ item.name }}</span>
          </template>
          <el-menu-item-group v-show="!collapsed">
            <template #title>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item
              v-for="child in item.children"
              :key="child.index"
              :index="child.index"
              @click="handleMenuItemClick(child)"
            >
              {{ child.name }}
            </el-menu-item>
          </el-menu-item-group>
          <!-- 折叠状态下的子菜单 -->
          <template v-show="collapsed">
            <el-menu-item
              v-for="child in item.children"
              :key="child.index"
              :index="child.index"
              @click="handleMenuItemClick(child)"
            >
              {{ child.name }}
            </el-menu-item>
          </template>
        </el-sub-menu>
        <el-menu-item
          v-else
          :index="item.index"
          @click="handleMenuItemClick(item)"
        >
          <el-icon><component :is="item.icon"></component></el-icon>
          <span v-show="!collapsed">{{ item.name }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </aside>
</template>

<style scoped>
.sidebar {
  width: 220px;
  background-color: #545c64;
  overflow-y: auto;
  transition: width 0.3s ease;
  height: 100%;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
}

.sidebar-collapsed {
  width: 60px;
}

.el-menu-vertical-demo {
  min-height: 100%;
  border-right: none;
  background-color: #545c64;
}

/* 折叠时的样式调整 */
:deep(.sidebar-collapsed .el-sub-menu__title) {
  padding: 0 20px !important;
}

:deep(.sidebar-collapsed .el-menu-item) {
  padding: 0 20px !important;
}

/* 子菜单样式 */
:deep(.el-menu-item-group__title) {
  padding: 10px 20px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0.1);
}

/* 激活状态的样式增强 */
:deep(.el-menu-item.is-active) {
  background-color: rgba(0, 0, 0, 0.3) !important;
}

/* 鼠标悬停效果 */
:deep(.el-menu-item:hover) {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

:deep(.el-sub-menu__title:hover) {
  background-color: rgba(0, 0, 0, 0.2) !important;
}
</style>
